<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <template v-for="(item, index) in columns">
      <el-table-column
        :key="index"
        v-if="item.field"
        :label="item.title"
        :prop="item.field"
        :width="item.width"
      >
      </el-table-column>
      <el-table-column
        :label="item.title"
        :key="index"
        :width="item.width"
        v-else
      >
        <template slot-scope="scope">
          <el-switch
            v-if="item.type === 'switch'"
            v-model="scope.row[item.payload.field]"
            @change="item.payload.change(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <template v-if="item.type === 'btn'">
            <el-button
              size="mini"
              :type="item.type"
              v-for="(item, index) in item.payload"
              :key="index"
              @click="item.click(scope.row)"
              >{{ item.name }}</el-button
            >
          </template>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      required: true,
      type: Array,
    },
    columns: {
      required: true,
      type: Array,
    },
  },
};
</script>

<style></style>
